<template>
  <div class="bpmn-de">
    <bpmn-toolbar v-if="getEditorConfig.toolbar" />
    <div class="main-content">
      <bpmn-designer :xml.sync="xmlString" />
      <bpmn-panel v-if="getEditorConfig.penalMode === 'custom'" />
      <div v-else class="camunda-panel" id="camunda-panel"></div>
    </div>

    <bpmn-settings />
    <bpmn-context-menu />
  </div>
</template>

<script>
import BpmnDesigner from "@/components/BpmnProcessDesigner/packages/components/Designer/index.vue";
import BpmnSettings from "@/components/BpmnProcessDesigner/packages/components/Settings/index.vue";
import { mapGetters } from "vuex";
import BpmnToolbar from "@/components/BpmnProcessDesigner/packages/components/Toolbar/index.vue";
import BpmnContextMenu from "@/components/BpmnProcessDesigner/packages/components/ContextMenu/ContextMenu.vue";
import BpmnPanel from "@/components/BpmnProcessDesigner/packages/components/Panel/index.vue";
export default {
  name: "App",
  components: { BpmnPanel, BpmnContextMenu, BpmnToolbar, BpmnSettings, BpmnDesigner },
  data() {
    return {
      xmlString: undefined
    };
  },
  computed: {
    ...mapGetters(["getEditorConfig"])
  },
  mounted() {
    document.body.addEventListener("contextmenu", function (ev) {
      ev.preventDefault();
    });
  }
};
</script>
<style>
.bpmn-de {
  width: calc(100vw - 200px);
  height: calc(100vh - 84px);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
  margin: 0;
  padding: 0;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}
</style>
